<template>
   <!--总界面-->
  <el-container class="homess">
  <!--头部-->
  <el-header>电商后台管理系统<el-button type="warning" @click="elit">退出</el-button></el-header>
  <!--页身-->
  <el-container>
  <!--侧导航-->
    <el-aside :width= 'flag ?"64px":"200px" '><el-menu
      :default-active="indexPath"
      background-color="rgb(4, 3, 63)"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      :collapse="flag"
      :collapse-transition="false"
      router
      >
      <div class="emnuDiv" @click='flag=!flag'>=</div>
      <!-- 一级菜单 -->
      <el-submenu :index="items.id+''" v-for='items in Minlist' :key='items.id'>
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <!-- 图标 -->
          <i :class="iconInfo[items.id]" class='iconn'></i>
          <!-- 内容 -->
          <span>{{items.authName}}</span>
        </template>
        <!--二级-->
         <el-menu-item :index="'/'+itemist.path"
          v-for='itemist in items.children'
           :key='itemist.id'
           @click="subClick('/'+itemist.path)"
           ><i class="el-icon-menu"></i>{{itemist.authName}}</el-menu-item>

      </el-submenu>

    </el-menu>
</el-aside>
    <!--内容区-->
    <el-main>
    <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
  data () {
    return {
      Minlist: [],
      iconInfo: {
        '125': 'iconfont icon-users',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-danju'
      },
      flag: false,
      indexPath: ''
    }
  },
  created () {
    this.getMinList()
    this.indexPath = window.sessionStorage.getItem('acrPath')
  },
  methods: {
    elit () {
      window.sessionStorage.clear()
      this.$confirm('是否在离开页面', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '退出',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '退出成功'
          })
          this.$router.push('/Loge')
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '离开界面'
              : '停留在当前页面'
          })
        })
    },
    async getMinList () {
      var { data: res } = await this.axios.get('menus')
      if (res.meta.status === 200) {
        this.Minlist = res.data
        // console.log(res)
      }
    },
    subClick (acPath) {
      window.sessionStorage.setItem('acrPath', acPath)
      this.indexPath = acPath
    }
  }
}
</script>
<style lang="less" scoped>
.homess{
    color: #fff;
    background: rgb(4, 3, 63);
    height: 100vh;
    .el-header{
    background: rgb(9, 4, 80);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-aside{
  .emnuDiv{
    background:rgb(47, 21, 163);
    text-align:center;
    line-height:25px;
  }
.iconn{
  color:#fff;
  margin-right:10px;
}
.el-menu{
  border-right:none;
}
}
.el-main{
    background: #eee;
    color: #333;
}
}

</style>
